<template>
	<view class="step_three" :style="{paddingTop: paddingHeight + 'px'}">
		<nav-bar></nav-bar>
		<image :src="imgUrl + 'img/ico/at/20231109/1699516092778.png'" class="ikon"></image>
		<view class="title">
			制定营养计划
		</view>
		<view class="sub-title">
			通过基于新城代谢的
		</view>
		<view class="sub-title" style="margin-top: 0;">
			个性化计划来实现您的目标
		</view>
		<view class="dot-box">
			<view class="dot"></view>
			<view class="dot"></view>
			<view class="dot current"></view>
			<view class="dot"></view>
		</view>
		<view class="next" @click="next">
			<uni-icons type="arrow-right" color="#fffF" size="50"></uni-icons>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				paddingHeight: uni.getStorageSync('navbarHeight'),
				imgUrl: this.$imgUrl,
			}
		},
		methods: {
			next() {
				uni.navigateTo({
					url: '/pagesB/login/step/step_four'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		min-height: 100%;
		background-color: #f0f2f5;
	}
</style>
<style lang="scss" scoped>
	.step_three {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.ikon {
			margin: 45rpx 0 112rpx;
			width: 100%;
			max-width: 750rpx;
			height: 750rpx;
		}

		.title {
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 50rpx;
		}

		.sub-title {
			margin-top: 12rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 40rpx;
		}

		.dot-box {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 112rpx 0 88rpx;

			.dot {
				width: 16rpx;
				height: 16rpx;
				margin: 0 12rpx;
				border-radius: 50%;
				background-color: rgba(84, 93, 222, 0.5);
			}

			.current {
				background-color: #545DDE;
			}
		}
	}
</style>